<template>
    <el-container>
        <el-header>
            <span>员工订餐系统</span>
            <div>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <span> {{user.empName}} ({{ user.role }})</span><span @click="logout">退出</span></div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        :default-active="menuName"
                        :router="true"
                        class="el-menu-vertical-demo"
                >
                    <el-menu-item index="/orderMain">
                        <i class="el-icon-food"></i>
                        <span slot="title">员工订餐</span>
                    </el-menu-item>
                    <el-menu-item index="/orderRecords">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">个人历史</span>
                    </el-menu-item>
                    <el-menu-item index="/orderReview" v-if="user.role==='管理员'|| user.role==='部门经理'">
                        <i class="el-icon-s-check"></i>
                        <span slot="title">订餐审核</span>
                    </el-menu-item>
                    <el-menu-item index="/userView" >
                        <i class="el-icon-edit-outline"></i>
                        <span slot="title">修改密码</span>
                    </el-menu-item>
                    <el-submenu index="1" v-if="user.role==='管理员'">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>信息维护</span>
                        </template>
                    <el-menu-item index="/orderSummary">
                        <i class="el-icon-setting"></i>
                        <span slot="title">订餐信息汇总</span>
                    </el-menu-item>
                    <el-menu-item index="/meal">
                        <i class="el-icon-setting"></i>
                        <span slot="title">餐品信息维护</span>
                    </el-menu-item>
                    <el-menu-item index="/emp">
                        <i class="el-icon-setting"></i>
                        <span slot="title">员工信息维护</span>
                    </el-menu-item>
                    <el-menu-item index="/dept">
                        <i class="el-icon-setting"></i>
                        <span slot="title">部门信息维护</span>
                    </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            menuName: "/emp",
        }
    },
    methods: {
        logout() {
            //清空session
            sessionStorage.clear()
            //回登录页面
            this.$router.push("/")
        }
    },
    computed: {
        user() {
            let user = JSON.parse(sessionStorage.getItem("user"));
            this.$store.dispatch("setUser", {user:user})
            console.log(user)
            return this.$store.state.user
        },
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.menuName = to.path
        })
    },
    created() {
        // 从sessionStorage中获取deptId
        const user = JSON.parse(sessionStorage.getItem("user"));
        // 使用Vuex的action来更新state
        this.$store.dispatch('setUser', {user:user});
    }
}
</script>

<style scoped>
.el-header {
    background-color: #0697f8;
}

.el-main {
    background-color: #eaedf1;
}

.el-container {
    height: 100%;
}

/*头部样式*/
.el-header {
    background-color: #373d41;
    display: flex;
    /*左右贴边*/
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
}

.el-header > div {
    display: flex;
    align-items: center;
}

.el-header > div > span {
    cursor: pointer;
}

.el-header span {
    margin-left: 15px;
}
</style>